<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>响应式的数组方法</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="btnClick()">按钮</button>
    <ul>
      <li v-for="(item,index) in letters" :key="index">{{item}}</li>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        letters: ['A', 'B', 'C', 'D', 'E', 'A']
      },
      methods: {
        btnClick() {
          // 1. push 方法:在数组最后加上元素，响应式
          // this.letters.push('aaa');
          // this.letters.push('aaa','bbb','ccc');

          // 2. 通过索引值修改数组中的元素,无效果,非响应式
          this.letters[0] = 'bbbbb';
          // 数组元素改变，但界面显示还是原来的没有改变，非响应式
          console.log(this.letters);
          // 响应式方案
          // 1. splice的替换
          // this.letters.splice(0, 1, 'Splicebbbb');
          // 2.Vue内部实现：set（要修改的对象，索引值，修改后的值）
          // Vue.set(this.letters, 0, 'Vuebbbb')


          // 响应式方法
          // 1. pop()
          // pop():删除啊数组最后一个元素
          // this.letters.pop();
          // 2. shift();
          // shift()：删除数组中的第一个元素
          // this.letters.shift();
          // 3. unshift()
          // unshift()：在数组最前面添加元素
          // this.letters.unshift("aaa");
          // 添加多个元素
          // this.letters.unshift('aaa','bbb','ccc');
          // 4. splice()
          // splice作用：删除、插入、替换元素
          // 删除元素：第一个参数表示开始元素索引位置，第二个参数表示要删除几个元素
          // this.letters.splice(0);
          // splice(start)：不传第二个元素，从start位置开始后面全都删掉
          // this.letters.splice(2,1);
          // 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
          // this.letters.splice(0, 1, 'm', 'n', 1, 'x');
          // 插入元素：第二个参数为0，并且后面跟上要插入的元素
          // this.letters.splice(0, 0, 'm', 'n', 1, 'x');
          // 5.sort()：对数组元素进行排序
          // this.letters.sort();
          // 6. reverse()：反转数组元素
          // this.letters.reverse();

        },

      }
    });
  </script>
  <script>
    // 可变参数方法
    function sum(...nums) {
      // 会转成数组
      console.log(nums);
      // for (let index = 0; index < num.length; index++) {
      //   const element = array[index];

      // }
    }
    sum(10, 20, 30, 40, 50, 60);
  </script>
</body>

</html>